<template>
  <div>
    <!-- 这里应该为:city='city' -->
    <home-header></home-header>
    <!-- 这里应该为:swiperList='swiperList' -->
    <home-swiper :list='swiperList'></home-swiper>
    <home-icons :list='iconList'></home-icons>
    <home-Recommend :list='recommendList'></home-Recommend>
    <home-Weekend :list='weekendList'></home-Weekend>
  </div>
</template>

<script>
import homeHeader from "../home/component/homeheader";
import homeSwiper from "./component/homeSwiper";
import homeIcons from "./component/homeIcons";
import homeRecommend from "./component/homeRecommend";
import homeWeekend from './component/homeWeekend'
import axios from "axios";
import { mapState } from 'vuex';
export default {
  data() {
    return {
      swiperList:[],
      iconList:[],
      recommendList:[],
      weekendList:[],
      lastCity:''
    }
  },
  components: {
    homeHeader,
    homeSwiper,
    homeIcons,
    homeRecommend,
    homeWeekend
  },
  methods: {
    
    getHomeInfo(){
      axios.get('http://localhost:3000/data?city=' +this.city)
      .then(res=>{
        this.swiperList=res.data.swiperList
        this.iconList=res.data.iconList
        this.recommendList=res.data.recommendList
        this.weekendList=res.data.weekendList
      })
    },
    
  },
  computed: {
    ...mapState(['city'])
  },
  // 页面挂载好后调用该函数
  mounted() {
    this.getHomeInfo()
    this.lastCity=this.city
  },
  activated() {
    if(this.lastCity !== this.city){
      this.lastCity=this.city
      this.getHomeInfo()
    }
  },
};
</script>

<style lang="less" scoped>
</style>
